
import React, { Component } from "react";
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import Breadcrumbs from "../../../components/component/Breadcrumb/breadcrumb";
import { Divider, Typography, Card, Tag, Switch, Popconfirm, Table, Statistic, Badge, Progress, Space, Modal, Radio   } from 'antd';
import { CaretUpOutlined, CaretDownOutlined, ArrowUpOutlined, ArrowDownOutlined, CodepenOutlined, EuroOutlined, ConsoleSqlOutlined,
        CloudServerOutlined, ClusterOutlined, DollarOutlined, AccountBookOutlined, UsbOutlined, TwitterOutlined, BankOutlined, HomeOutlined,
        ExperimentOutlined, CarOutlined, FallOutlined, RiseOutlined, AlertOutlined, LikeOutlined    } from '@ant-design/icons';
import styles from './dataMonitor.module.css';
const mytextStyle={
  color:"#333",                //文字颜色
  fontStyle:"normal",         //italic斜体  oblique倾斜
  fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
  // fontFamily:"sans-serif",   //字体系列
  fontSize:12,                //字体大小
};
const { Title } = Typography;
const colors = [    
      '#63b2ee',
      '#76da91',
      '#f8cb7f',
      '#f89588',
      '#7cd6cf',
      '#874d00',
      '#9254de',
      '#ffec3d',
      '#449a20'
    ];

var cost = [2,3,3,1,1,4];//本期比上期（大于1按1处理）
var dataCost = [10.01,200,200];//真是的金额
var totalCost = [ 5,5, 5, 5, 5, 5];//比例综合
var visits = [5, 5, 5, 5, 5, 5];//本期占总的百分比*100
var grade = ['清洁空气天数','MP2.5达标指数','污染雾霾天数', 'CO污染指数比', 'SO2污染指数占比', 'PO指数比'];
var data = {
    grade: grade,
    cost: cost,
    totalCost: totalCost,
    visits: visits,
    dataCost:dataCost
};

const xian = ['招商引资', '社保缴纳完成', '公共支出', '新能源投资', '教育指标', '产业集群资源', '经济运行状况', '商业入驻', '写字楼管理', '基础设计规划', '西咸新区引资', '秦岭环境治理', '城市管理支出']
const points = [  '高新区锦业路56号2枪西北角', 
                  '莲湖区桃园路街道6号双府新天家2枪铁路口', 
                  '新城区朱宏路125号万科翡翠城西北2枪', 
                  '高新区唐延路以南69号-禾盛京广中心A座D口1枪', 
                  '高新区唐延路东-延平门地铁口西D口3枪', 
                  '高陵区马家湾街道洪福商场十字-西北D口16枪', 
                  '陕西省西安市雁塔区汇新路西口28枪6口', 
                  '陕西省西安市雁塔区西浐河西路以南15枪3口', 
                  '陕西省西安市未央区金桥六路17号恒大御景豪庭南门口6枪', 
                  '西安市碑林区碑林区人民政府东门西6枪1口', 
                  '陕西省西安市雁塔区西三环辅路服装学院门口8枪2口', 
                  '西咸新区沣东新城科统一路南5口2枪', 
                  '西安市长安区陕西师范大学(长安校区)北门南8枪', 
                  '陕西省西安市长安区西安电子谷核心区警卫3口南8枪']
export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: '重点资金项目',
          dataIndex: 'name',
          width:150,
          ellipsis:true,
        },       
        {
          title: '预算',
          dataIndex: 'age',   
          ellipsis:true,      
        },
        {
          title: '项目产值',
          dataIndex: 'gdpNum',
          ellipsis:true,
        },
        {
          title: '投入人力',
          dataIndex: 'live',
          ellipsis:true,
        },
        {
          title: '增长率',
          dataIndex: 'upRate',
          ellipsis:true,
          render:(_,record) =>  record.key % 3 >1 ? <span><CaretUpOutlined style={{color:'rgb(135, 208, 104)'}}  /> {record.upRate}%</span> : <span><CaretDownOutlined style={{color:'#FF4D4F'}} /> {record.upRate}%</span>
        },     
        {
          title: '项目支出',
          dataIndex: 'live',
          ellipsis:true,
        },                      
        {
          title: '完成率',
          dataIndex: 'rate',
          ellipsis:true,
        },
        {
          title: '标签',
          ellipsis:true,
          dataIndex: 'tags',
          render: (_, record) => {
                return (
                  record.key % 3 >1 ?
                  <Tag color="gold" key={record.key}>
                    重点
                  </Tag>:
                  <Tag key={record.key}>
                    省级
                  </Tag>
                );
              },           
        }, 
        {
          title: '状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status % 2 == 1){
                return  <span>
                  <Badge status="success" /> 
                  <span style={{marginLeft:6}}>成功</span>
                </span>
            }else{
              return  <span>
                <Badge status="error" /> 
                <span style={{marginLeft:6}}>失败</span>
            </span>
            }
          }
        },                   
      ],
      trafficColumns: [
        {
          title: '车流量监控站点',
          dataIndex: 'point',
          width:260,
          ellipsis:true,
        },       
        {
          title: '平均流量',
          dataIndex: 'age',   
          ellipsis:true,    
          render:(_,record) =>  record.age+'万辆'
        },
        {
          title: '流入量',
          dataIndex: 'gdpNum',
          ellipsis:true,
          render:(_,record) =>  record.gdpNum+'万辆'
        },
        {
          title: '流出量',
          dataIndex: 'live',
          ellipsis:true,
          render:(_,record) =>  record.live+'万辆'
        },
        {
          title: '增长率',
          dataIndex: 'upRate',
          ellipsis:true,
          render:(_,record) =>  record.key % 3 >1 ? <span><CaretUpOutlined style={{color:'rgb(135, 208, 104)'}}  /> {record.upRate}%</span> : <span><CaretDownOutlined style={{color:'#FF4D4F'}} /> {record.upRate}%</span>
        },     
        {
          title: '拥堵指数',
          dataIndex: 'live',
          ellipsis:true,
          render:(_,record) =>  record.live+'%'
        },                      
        {
          title: '车辆占比',
          dataIndex: 'rate',
          ellipsis:true,
        },
        {
          title: '平均车速',
          ellipsis:true,
          dataIndex: 'carRate', 
          render:(_,record) =>   <span>{record.carRate+'Km/h'}</span>
        }, 
        {
          title: '交通状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status % 3 == 1){
                return  <span>
                  <Badge status="processing" /> 
                  <span style={{marginLeft:6}}>畅通</span>
                </span>
            }else if(record.status % 3 == 2){
              return  <span>
                <Badge status="success" /> 
                <span style={{marginLeft:6}}>正常</span>
            </span>
            }else{
              return  <span>
                <Badge status="error" /> 
                <span style={{marginLeft:6}}>拥堵</span>
            </span>
            }
          }
        },                   
      ],   
      airColumns: [
        {
          title: '监测节点',
          dataIndex: 'point',
          width:100,
          ellipsis:true,
        },       
        {
          title: 'CO',
          dataIndex: 'age',   
          ellipsis:true,    
          render:(_,record) =>  record.age/100+'mg'
        },
        {
          title: 'NO',
          dataIndex: 'gdpNum',
          ellipsis:true,
          render:(_,record) =>  record.gdpNum/100+'mg'
        },
        {
          title: 'SO2',
          dataIndex: 'live',
          ellipsis:true,
          render:(_,record) =>  record.live/100+'mg'
        },
        {
          title: 'NO2',
          dataIndex: 'carRate',
          ellipsis:true,
          render:(_,record) => record.live/100+'mg'
        },     
        {
          title: 'HNO3',
          dataIndex: 'live',
          ellipsis:true,
          render:(_,record) =>  record.live/100+'mg'
        },                      
        {
          title: '空气质量',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status % 3 == 1){
                return  <span>
                  <Badge status="processing" /> 
                  <span style={{marginLeft:6}}>达标</span>
                </span>
            }else if(record.status % 3 == 2){
              return  <span>
                <Badge status="success" /> 
                <span style={{marginLeft:6}}>正常</span>
            </span>
            }else{
              return  <span>
                <Badge status="error" /> 
                <span style={{marginLeft:6}}>超标</span>
            </span>
            }
          }
        }, 
        {
          title: '占比增幅',
          dataIndex: 'upRate',
          ellipsis:true,
          render:(_,record) =>  record.key % 3 >1 ? <span><CaretUpOutlined style={{color:'rgb(135, 208, 104)'}}  /> {record.upRate}%</span> : <span><CaretDownOutlined style={{color:'#FF4D4F'}} /> {record.upRate}%</span>
        },                            
      ],          
      loading:false,
      tableData:[],
      tableDatas:[],
      selectedRowKeys: [],
      visible:false,
      airVisible:false,
      infoDetail:{},
      airDetail:{}
    };
  }

  componentDidMount() {
    window.scrollTo(0, 0);
    this.setState({loading:true})
    setTimeout(() => {
        this.getDatas();
    }, 1000);
  }

  getOptionLine(){
    return {
        color: colors,
        legend: {},
        grid: {
          top: 50,
          bottom: 40
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          showDelay: 0,
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: '#999' ,
          borderRadius: 8,
          textStyle:{
            textBorderType:'dashed'
          }
        },
        xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
                  interval: 0, 
                  rotate: 30,                    
                  textStyle: {
                    color: '#666',
                    fontSize:10
                }
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#666'
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    '车流量' +
                    params.value +'百辆'
                  );
                }
              }
            },
            data: ['0:0', '1:00', '2:00', '3:00', '4:00', '5:00','6:00','7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00',]
          },
        yAxis:{
            type: 'value',
            name:'百辆',
            splitLine:{
              lineStyle:{
                type:'dashed',//y轴分割线类型
                color:'#aea7ac',
              }
            },
        },
        series: [
          {
            name: '车流量监控分析',
            type: 'line',       
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(99,178,238,0.9)'
              }, {
                offset: 1,
                color: 'rgba(99,178,238,0)'
              }])
            },            
            data: [ 1.1, 0.2, 0.3, 0.1, 0, 1.9, 3.9, 7.9, 29.6, 19.3, 16.3, 16.3, 15.9, 13.8, 16.4, 17.9, 18.9, 34.9, 35.9, 40.3, 31.8, 26.3, 19.9, 12.5 ]
          },
        ]
   };
  }

  getOptionBar(){
    return {
      colors:['#24b324', '#d594f7' ],
      title: {
        text: '',
        subtext: 'PM2.5成分指标'
      },
      tooltip: {
        trigger: 'axis'
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          // prettier-ignore
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'CO',
          type: 'bar',
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
          ],
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          itemStyle:{
            color:'#73c0de'
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        },
        {
          name: 'NO2',
          type: 'bar',
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
          ],
          itemStyle:{
            color:'#fac858'
          },
          markPoint: {
            data: [
              { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
              { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        }
      ]
    };
  }

  getAirOption(){
    const { airDetail } = this.state;
    return {
      title: {
        text: 'PM2.5污染物成分雷达图',
        left: "center",
      },
      tooltip: {
        trigger: 'item'
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: 'NO', max: 2 },
          { name: 'CO2', max: 2 },
          { name: 'SO2', max: 2 },
          { name: 'NO2', max: 2 },
          { name: 'HNO3', max: 2 },
        ]
      },
      series: [
        {
          name: 'PM2.5污染物指标分析',
          type: 'radar',
          data: [
            {
              value: [(airDetail.data-102)/100, (airDetail.data-50)/100,airDetail.data/100, (airDetail.data-50)/100, (airDetail.data-93)/100],
              name: '早晨'
            },
            {
              value: [(airDetail.data-20)/100, (airDetail.data-102)/100, airDetail.data/101, (airDetail.data-100)/100, (airDetail.data-125)/100],
              name: '中午'
            },
            {
              value: [(airDetail.data-15)/100, (airDetail.data-16)/100, airDetail.data/105, (airDetail.data-10)/100, (airDetail.data)/100],
              name: '晚上'
            }
          ]
        }
      ]
    };
  }
  getOptionCookie = () =>{
    return {
      title: {
        text: '项目资金指标占比',
        subtext: '资金占比(支出+已规划) 单位:万元',
        left: 'center'
      },
      legend: {
        top:255
      },
      grid: {
        top: 20,
        bottom: 10
      },
      color: colors,
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '支出+已规划支出',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 321, name: '项目建设用地' },
            { value: 535, name: '建筑商承保' },
            { value: 280, name: '招投标开销' },
            { value: 384, name: '运营总体开支' },
            { value: 319, name: '广告宣传' },
            { value: 242, name: '商业竞争支出' },
            { value: 122, name: '营销资金支出' },
            { value: 88, name: '电气水基础支出' },
            { value: 137, name: '项目前期花费' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  }

  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };

  onChartClick(param,echarts){
    console.log('param',param.dataIndex, param);
    this.setState({visible:true,infoDetail:param});
  }  

  onAirChartClick(param,echarts){
    console.log('空气污染', param);
    this.setState({airVisible:true,airDetail:param});
  } 

  onChartLegendselectchanged(param,echarts){
    console.log(param)
  }

  handleOk = () => {
    this.setState({visible:false,infoDetail:{}});
  }

  handleAirOk = () => {
    this.setState({airVisible:false,infoDetail:{}});
  }

  timeOnChange = () =>{
    this.setState({loading:true,tableData:[]},()=>{
      this.getDatas();
    });
  }

  getDatas = ()=>{
    let datas= [];
    for (let i = 0; i < 13; i++) {
      datas.push({
        key: i,
        name: `${xian[i]}`,
        age: Math.floor(Math.random() * 20),
        tags: i,
        gdp: Math.floor(Math.random() * 10),
        live: Math.floor(Math.random() * 19.6),
        gdpNum: Math.floor(Math.random() * 13),
        upRate: Math.floor(Math.random() * 9),
        rate: Math.floor(Math.random() * 50)+'%',
        peopleRate: Math.floor(Math.random() * 15)+'%',
        status:Math.floor(Math.random() * 1000),
        people: Math.floor(Math.random() * 100)+'万人',
        point: `${points[i]}`,
        carRate: Math.floor(Math.random() * 200),
      });
    }
    setTimeout(() => {
      this.setState({tableData:datas,loading:false,tableDatas:datas});
    }, 1000);
    
  }

  render() {
    const { columns, loading, tableData, selectedRowKeys, visible, airVisible, infoDetail, trafficColumns, airDetail, airColumns } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    let onEvents={
      'click': this.onChartClick.bind(this),
      'legendselectchanged': this.onChartLegendselectchanged.bind(this)
    }
    let onAirEvent={
      'click': this.onAirChartClick.bind(this),
    }
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider /> 
        <div className={styles.content}>
          <div className={styles.contentLeft}>
              <div style={{textAlign:'center',display:"flex",justifyItems:"flex-start"}}>
                <div style={{margin:10}}>
                    <Card>
                        <Statistic
                          title="城市绿化面积"
                          value={11.28}
                          precision={2}
                          valueStyle={{
                            color: '#3f8600',
                          }}
                          prefix={<TwitterOutlined />}
                          suffix="%"
                        />
                        <Badge status="processing" style={{marginTop:10}} text="163.6万亩" />
                      </Card>

                      <Card style={{marginTop:20}}>
                        <Statistic
                            title="数字政府智慧项目"
                            value={8}
                            precision={0}
                            valueStyle={{
                              color: '#efa666',
                            }}
                            prefix={<CodepenOutlined />}
                            suffix="个"
                          /> 
                          <Statistic title="电子政务覆盖率"  style={{marginTop:23}} value='96.7%' prefix={ <span style={{color:'#2fd3e0'}}><UsbOutlined /></span> } />
                    </Card>
                  </div>     
                  <div style={{margin:10}}>
                    <Card>
                        <Statistic
                          title="大宗商品交易额"
                          value={2.37}
                          precision={2}
                          valueStyle={{
                            color: '#7cd6cf',
                          }}
                          prefix={ <span><ExperimentOutlined /> <ArrowUpOutlined /></span>  }
                          suffix="%"
                        />
                        <Badge status="success" style={{marginTop:10}} text="184.3亿元" />
                      </Card>
                      <Card style={{marginTop:20}}>
                        <Statistic
                            title="大学高等教育资源"
                            value={586}
                            precision={0}
                            valueStyle={{
                              color: '#63b2ee',
                            }}
                            prefix={<BankOutlined />}
                            suffix="所"
                          /> 
                          <Statistic title="医疗资源(三级甲等)"  style={{marginTop:23}} value='27所' prefix={ <span style={{color:'#f8cb7f'}}><HomeOutlined /></span> } />
                    </Card>
                  </div>                             
                  <Card style={{width:675,margin:10}}>
                      <ReactEcharts
                          option={this.getOptionLine()} 
                          notMerge={true}
                          lazyUpdate={true}
                          onEvents={onEvents}
                          style={{width:670}}
                      />
                  </Card>
                  {/* <Card style={{width:432,margin:10}}>
                      <ReactEcharts
                          option={this.getOptionCookie()} 
                          notMerge={true}
                          lazyUpdate={true}
                          onEvents={onEvents}
                          style={{width:369}}
                      />
                  </Card> */}
                  <Card style={{width:431,margin:10}}>
                    <div>
                      <Badge.Ribbon color='red' text="超额完成">
                        <Card title="城市高速快速干道总里程覆盖率" size="small">
                            <Progress steps={10} style={{marginTop:30,marginLeft:30}}  percent={89.69} />
                            <Statistic title="投资金额" style={{marginLeft:20,float:'left'}} value='85亿' prefix={ <DollarOutlined /> } />
                        </Card>
                      </Badge.Ribbon>
                    </div>
                    <div style={{display:"flex",justifyContent:'space-around',marginTop:30,height:150,overflow:"hidden"}}>
                        <div style={{marginTop:30}}>
                          <div>
                            <span style={{color:'#1890ff'}}><ConsoleSqlOutlined style={{fontSize:30}} /></span> 
                          </div>
                          <div>
                            <Statistic
                                title="智慧城市服务器"
                                value={86}
                                valueStyle={{
                                  color: '#666',
                                  marginTop:10
                                }}
                                suffix="台"
                              />                            
                          </div>
                        </div>
                        <div style={{marginTop:30}}>
                          <div>
                            <span style={{color:'#1890ff'}}><CloudServerOutlined style={{fontSize:30}} /></span> 
                          </div>
                          <div>
                            <Statistic
                                title="数据云服务"
                                value={1285}
                                valueStyle={{
                                  color: '#666',
                                  marginTop:10
                                }}
                                suffix="TB"
                              /> 
                          </div>
                        </div>
                        <div style={{marginTop:30}}>
                          <div>
                            <span style={{color:'#1890ff'}}><ClusterOutlined style={{fontSize:30}} /></span> 
                          </div>
                          <div>
                            <Statistic
                                title="服务分布式"
                                value={87.36}
                                precision={2}
                                valueStyle={{
                                  color: '#666',
                                  marginTop:10
                                }}
                                suffix="%"
                              /> 
                          </div>
                        </div>
                    </div>
                  </Card>                                    
              </div>              
          </div>
          <div className={styles.contentRight}>
              <div>
                <Card style={{width:610,margin:10}} title='环境污染指标云服务监控'>
                      <ReactEcharts
                          option={this.getOptionBar()} 
                          notMerge={true}
                          lazyUpdate={true}
                          onEvents={onAirEvent}
                          style={{width:600,height:220}}
                      />
                  </Card>
              </div>
              <div>
                  <Table size="middle" style={{width:'96%',margin:'10px 5px',background:'#fff',padding:'0 15px',overflow:"hidden"}} columns={columns} loading={loading} dataSource={tableData} 
                        pagination={{
                        pageSizeOptions:['5','10','20'],
                        pageSize:5,
                        showSizeChanger: true,
                        onShowSizeChange:this.onShowSizeChange,
                        showTotal: (total) => `总数${total}`
                  }}/>
              </div>
          </div>
          <Modal title="车流量详细信息" visible={visible} onOk={this.handleOk} width={888} onCancel={()=>{this.setState({visible:false})}}>
                  <div style={{display:'flex',justifyContent:'flex-start'}}>
                    <Card style={{width:230}} title='汽车总流量'>
                        <Statistic
                          value={infoDetail.data}
                          precision={2}
                          valueStyle={{
                            color: '#333',
                          }}
                          prefix={<CarOutlined />}
                          suffix="万辆"
                        />
                        {/* <Badge status="processing" style={{marginTop:10}} text="163.6万亩" /> */}
                    </Card>                    
                    <Card style={{width:230,marginLeft:10}} title='车流入量'>
                        <Statistic
                          value={infoDetail.data/2}
                          precision={2}
                          valueStyle={{
                            color: '#333',
                          }}
                          prefix={<RiseOutlined />}
                          suffix="万辆"
                        />
                        {/* <Badge status="processing" style={{marginTop:10}} text="163.6万亩" /> */}
                    </Card>
                    <Card style={{width:230,marginLeft:10}} title='车流出量'>
                        <Statistic
                          value={infoDetail.data-15}
                          precision={2}
                          valueStyle={{
                            color: '#333',
                          }}
                          prefix={<FallOutlined />}
                          suffix="万辆"
                        />
                        {/* <Badge status="processing" style={{marginTop:10}} text="163.6万亩" /> */}
                    </Card>
                    <Card style={{width:230,marginLeft:10}} title='拥堵系数'>
                        <Statistic
                          value={infoDetail.data/10}
                          precision={2}
                          valueStyle={{
                            color: 'red',
                          }}
                          prefix={<AlertOutlined />}
                          suffix="%"
                        />
                        {/* <Badge status="processing" style={{marginTop:10}} text="163.6万亩" /> */}
                    </Card>
                  </div>
                  <div>
                    <div style={{margin:'15px 0'}}>
                      <Radio.Group onChange={this.timeOnChange} defaultValue="a">
                        <Radio.Button value="a">近一分钟</Radio.Button>
                        <Radio.Button value="b">近一小时</Radio.Button>
                        <Radio.Button value="c">近一天</Radio.Button>
                        <Radio.Button value="d">近一周</Radio.Button>
                        <Radio.Button value="e">近一个月</Radio.Button>
                      </Radio.Group>
                    </div>
                    <Table size="small" style={{width:'100%',margin:'15px 5px',background:'#fff',overflow:"hidden"}} columns={trafficColumns} loading={loading} dataSource={tableData} 
                          pagination={{
                          pageSizeOptions:['5','10','20'],
                          pageSize:5,
                          showSizeChanger: true,
                          onShowSizeChange:this.onShowSizeChange,
                          showTotal: (total) => `总数${total}`
                    }}/>
                  </div>
          </Modal>
          <Modal title="环境PM2.5指标分析" visible={airVisible} onOk={this.handleAirOk} width={988} onCancel={()=>{this.setState({airVisible:false})}}>
                  <div style={{display:'flex',justifyContent:'flex-start'}}>
                    <Badge.Ribbon color="green" text="达标">
                      <Card title='空气总体指标' style={{width:180,marginLeft:10}}>
                            <Statistic
                              title="空气清洁度"
                              value={0.28}
                              precision={2}
                              valueStyle={{
                                color: '#3f8600',
                              }}
                              prefix={<LikeOutlined />}
                              suffix="㎎/m³"
                            />
                            <Badge status="success" style={{marginTop:10}} text="良好" />
                        </Card> 
                    </Badge.Ribbon>
                    <Card style={{marginLeft:10}} title='NO'>
                        <Statistic
                          value={(airDetail.data-102)/100}
                          precision={2}
                          valueStyle={{
                            color: '#666',
                          }}
                          suffix="㎎"
                        />
                        <Badge status="success" style={{marginTop:10}} text="良好" />
                    </Card>
                    <Card style={{marginLeft:10}} title='CO2'>
                        <Statistic
                          value={(airDetail.data-15)/100}
                          precision={2}
                          valueStyle={{
                            color: '#666',
                          }}
                          suffix="㎎"
                        />
                        <Badge status="success" style={{marginTop:10}} text="良好" />
                    </Card>
                    <Card style={{marginLeft:10}} title='SO2'>
                        <Statistic
                          value={airDetail.data/100}
                          precision={2}
                          valueStyle={{
                            color: 'red',
                          }}
                          suffix="㎎"
                        />
                        <Badge status="error" style={{marginTop:10}} text="超标" />
                    </Card>
                    <Card style={{marginLeft:10}} title='NO2'>
                        <Statistic
                          value={(airDetail.data-50)/100}
                          precision={2}
                          valueStyle={{
                            color: 'red',
                          }}
                          suffix="㎎"
                        />
                        <Badge status="error" style={{marginTop:10}} text="超标" />
                    </Card>
                    <Card style={{marginLeft:10}} title='HNO3'>
                        <Statistic
                          value={(airDetail.data-93)/100}
                          precision={2}
                          valueStyle={{
                            color: '#faad14',
                          }}
                          suffix="㎎"
                        />
                        <Badge status="warning" style={{marginTop:10}} text="临界值" />
                    </Card>
                  </div>
                  <div style={{margin:'20px 0',display:"flex",justifyContent:'flex-start'}}>
                      <div>
                        <ReactEcharts
                            option={this.getAirOption()} 
                            notMerge={true}
                            lazyUpdate={true}
                            style={{width:380}}
                        />
                      </div>
                      <div>
                        <div>
                          <Radio.Group onChange={this.timeOnChange} buttonStyle="solid" defaultValue="b">
                            <Radio.Button value="b">最近一小时</Radio.Button>
                            <Radio.Button value="c">最近一天</Radio.Button>
                            <Radio.Button value="d">最近一周</Radio.Button>
                          </Radio.Group>
                        </div>
                        <Table size="small" style={{width:'100%',margin:'15px 5px',background:'#fff',overflow:"hidden"}} columns={airColumns} loading={loading} dataSource={tableData} 
                              pagination={{
                              pageSizeOptions:['5','10','20'],
                              pageSize:5,
                              showSizeChanger: true,
                              onShowSizeChange:this.onShowSizeChange,
                              showTotal: (total) => `总数${total}`
                        }}/>
                      </div>
                  </div>

          </Modal>          
        </div>       
 
      </>  
    )
    }
}
